<template>
	<view class="wallet-page">
		<view class="container">
			<myTable v-model="current" :headers="headers" :tableData="tableData" :total="count" @change="changeReceive">
			</myTable>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		data() {
			return {
				headers: {
					remark: this.$t('Page.user.pl'),
					order_sn: this.$t('Page.user.ddh'),
					type: this.$t('Page.user.lx'),
					createtime: this.$t('Page.user.sj'),
				},
				tableData: [],
				current: 1,
				count: 0,
				remarkList: ['',
					"Recharge",
					"withdraw",
					"Direct rebate",
					"Secondary rebate",
					"Tertiary rebate",
					"First charge bonus",
					"One-click recovery",
					"Turn into a game",
					"Invite rewards",
					"One-Click Rebate",
					"Withdrawal Rejected",
					"Vip Achievement Reward",
					"Vip Daily Bonus",
					"Top Up Fixed Amount Bonus",
					"Background Add Amount",
					"Back Office Deduction",
					"Invitation Award",
					"Direct Push Betting Rebate Reward",
					"Second Level Bet Rebate Reward",
					"Three Level Bet Rebate Reward",
				]
			}
		},
		created() {
			this.getMoneylog()
		},
		methods: {
			changeReceive(e) {
				this.getMoneylog()
			},
			getMoneylog() {
				const {
					MONEYLOG
				} = this.$api
				sendMessage({
					flag: MONEYLOG,
					content: {
						page: this.current,
						type: '1'
					}
				})
				uni.$once(MONEYLOG, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.count = data.count
						data.list.forEach((item) => {
							item.remark = this.remarkList[item.remark]
							item.type = (item.type == 1 ? `+${item.money}` : `-${item.money}`)
						})
						this.tableData = data.list
						console.log("this.tableData: ", this.tableData);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-page {
		width: 100%;

		.container {
			width: calc(100% - 30px);
			margin: 0 auto;
			box-sizing: border-box;

			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16px 0;

				.amount {
					display: flex;
					align-items: center;
				}
			}

			.coin-icon {
				width: 30px;
				height: 30px;
				margin: 0 5px;
			}
		}
	}
</style>